<template>
	<view class="page-content">
		<view class="content-msg">
			<view class="flex-col relative section_2">
				<view class="flex-col self-stretch group_4">
					<view class="flex-row self-stretch">
						<image class="image_4" :src="formdata.photo" />
						<text class="self-start font_2 text_2 ml-15">{{formdata.name}}</text>
					</view>
					<view class="mt-8 grid">
						<view class="flex-col items-start grid-item">
							<text class="font_3">姓名</text>
							<text class="font_4 mt-11">{{formdata.name}}</text>
						</view>
						<view class="flex-col items-start grid-item">
							<text class="font_3">性别</text>
							<text class="font_4 mt-11">{{formdata.gender===1?'女':'男'}}</text>
						</view>
						<view class="flex-col items-start grid-item">
							<text class="font_3">年龄</text>
							<text class="mt-12 font_4">{{formdata.age}}</text>
						</view>
						<view class="flex-col items-start grid-item">
							<text class="font_3">学历</text>
							<text class="font_4 mt-11">{{formdata.educational}}</text>
						</view>
						<view class="flex-col items-start grid-item">
							<text class="font_3">毕业院校</text>
							<text class="mt-12 font_4">{{formdata.graduationInstitution}}</text>
						</view>
					</view>
				</view>
				<view class="flex-col self-center group_5">
					<view class="flex-row items-center self-stretch">
						<view class="section_3"></view>
						<text class="font text_3 ml-9">专业信息</text>
					</view>
					<view class="flex-row justify-between equal-division group_6">
						<view class="flex-col items-start equal-division-item">
							<text class="font_3 text_4">职业</text>
							<text class="mt-10 font_2">{{formdata.occupation}}</text>
						</view>
						<view class="flex-col items-start equal-division-item">
							<text class="font_3 text_4">全职/兼职</text>
							<text class="mt-10 font_2">{{formdata.jobType===0?'全职':'兼职'}}</text>
						</view>
						<view class="flex-col items-start equal-division-item">
							<text class="font_3 text_4">工作年限</text>
							<text class="mt-10 font_2">{{formdata.workYear}}年</text>
						</view>
					</view>
					<text class="self-start font_3 text_5">备注</text>
					<text class="self-stretch font_4 text_6">
						{{formdata.remark}}
					</text>
				</view>
			</view>
		</view>
		<view class="bottom-box">
			<view class="form-box">
				<view class="flex-row justify-between items-center group_16">
					<view class="flex-col button_3">
						<text class="self-start font_3 text_28">服务费用</text>
						<view class="flex-row items-center self-stretch section_11 mt-7">
							<text class="text_31">￥</text>
							<text class="text_30">{{formdata.fees}}</text>
							<text>/天</text>
						</view>
					</view>
					<view class="flex-col justify-start items-center button_4" @click="handleToChat(formdata.userId)"><text
							class="font text_29">聊一聊</text></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import petBaomu from "../../../../api/petBaomu.js";
	export default {
		data() {
			return {
				formdata: {
					photo: "",
					name: '',
					gender: "",
					age: '',
					jobType: '',
					educational: '', //学历
					graduationInstitution: '', //毕业院校
					workYear: '', //工作年限
					occupation: '', //职业
					fees: 0.00,
					remark: "",
					lat: 0,
					lng: 0,
					userId: "",
				},
			}
		},
		onLoad(option) {
			this.getDetail(option.id)
		},
		methods: {
			getDetail(id) {
				petBaomu.getPetBaomuById(id).then(res => {
					if (res.code === 200) {
						this.formdata = res.data
					} else {
						uni.showToast({
							title: '请求失败',
							icon: 'none'
						})
					}
				}).catch(err => {
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					})
				})
			},
			handleToChat(id) {
				uni.navigateTo({
					url: '/pages/news/user-chat/user-chat?userId=' + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-content {
		height: 100%;
		overflow-y: auto;
		background: linear-gradient(180deg, #fcd610 0%, rgba(252, 214, 16, 0) 30%);

		.content-msg {
			padding: 0 32rpx;

			.mt-11 {
				margin-top: 22rpx;
			}

			.ml-9 {
				margin-left: 18rpx;
			}

			.ml-15 {
				margin-left: 30rpx;
			}

			.section_2 {
				padding-top: 56rpx;
				background-color: #ffffff;
				border-radius: 24rpx;

				.group_4 {
					padding: 0 24rpx 20rpx;
					border-bottom: solid 8rpx #f6f6f6;

					.image_4 {
						border-radius: 50%;
						width: 90rpx;
						height: 90rpx;
					}

					.text_2 {
						margin-top: 40rpx;
						line-height: 25.34rpx;
					}

					.grid {
						margin-left: 16rpx;
						width: 456.76rpx;
						height: 366rpx;
						display: grid;
						grid-template-rows: repeat(3, minmax(0, 1fr));
						grid-template-columns: repeat(2, minmax(0, 1fr));
						row-gap: 0;
						column-gap: 174.76rpx;

						.grid-item {
							padding: 28rpx 0;
						}
					}
				}

				.group_5 {
					padding: 44rpx 0 52rpx;
					width: 595.62rpx;

					.section_3 {
						background-color: #fbd610;
						border-radius: 6rpx;
						width: 8rpx;
						height: 40rpx;
					}

					.font {
						font-size: 32rpx;
						font-family: PingFang SC;
						line-height: 28.48rpx;
						font-weight: 700;
						color: #000000;
					}

					.text_3 {
						line-height: 30.12rpx;
					}

					.equal-division {
						align-self: flex-start;
						margin-left: 8rpx;
						margin-top: 36rpx;

						.equal-division-item {
							padding: 8rpx 0;

							.text_4 {
								line-height: 21.82rpx;
							}
						}
					}

					.group_6 {
						width: 516.78rpx;
					}

					.text_5 {
						margin-left: 8rpx;
						margin-top: 44rpx;
						line-height: 22.3rpx;
					}

					.text_6 {
						margin-left: 8rpx;
						margin-top: 16rpx;
						line-height: 34rpx;
					}
				}

				.font_3 {
					font-size: 24rpx;
					font-family: PingFang SC;
					line-height: 22.34rpx;
					color: #999999;
				}

				.font_2 {
					font-size: 28rpx;
					font-family: PingFang SC;
					line-height: 25.98rpx;
					font-weight: 700;
					color: #000000;
				}

				.font_4 {
					font-size: 28rpx;
					font-family: PingFang SC;
					line-height: 20rpx;
					font-weight: 700;
					color: #000000;
				}
			}
		}

		.bottom-box {
			padding: 16rpx 0;
			background: #ffffff;
			box-shadow: 0rpx -8rpx 30rpx 0rpx rgba(0, 0, 0, 0.05);
			position: absolute;
			bottom: 0;
			width: 100%;

			.mt-7 {
				margin-top: 14rpx;
			}

			.group_16 {
				padding-left: 36rpx;
				padding-right: 28rpx;

				.button_3 {
					width: max-content;

					.font_3 {
						font-size: 24rpx;
						font-family: PingFang SC;
						line-height: 22.4rpx;
						font-weight: 700;
						color: #666666;
					}

					.text_28 {
						color: #000000;
					}

					.section_11 {
						padding: 6rpx 20rpx;
						margin-right: 40rpx;

						.text_31 {
							color: #000000;
							font-size: 24rpx;
							line-height: 17.72rpx;
						}

						.text_30 {
							color: #ff7676;
							font-size: 40rpx;
							line-height: 28.48rpx;
							width: max-content;
						}
					}
				}

				.button_4 {
					padding: 28rpx 0;
					background-color: #fbd610;
					border-radius: 68rpx;
					flex: 1;
					height: 84rpx;

					.font {
						font-size: 32rpx;
						font-family: PingFang SC;
						line-height: 30.02rpx;
						font-weight: 700;
						color: #000000;
					}

					.text_29 {
						line-height: 29.88rpx;
					}
				}
			}
		}
	}
</style>